/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/10/27
 */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input } from 'antd';
import { config } from 'utils';
import styles from './index.less';

// 登录页面
class Login extends React.Component {
  static propTypes = {
    form: PropTypes.object,
    dispatch: PropTypes.func,
    loading: PropTypes.object,
  };

  constructor (props) {
    super(props);
    this.state = {};
  }

  render () {
    const {
      loading,
      dispatch,
      form: {
        getFieldDecorator,
        validateFieldsAndScroll,
      },
    } = this.props;

    const handleOK = () => {
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          return;
        }
        dispatch({ type: 'user/login', payload: values });
      });
    };

    return (
      <div className={styles.form}>
        <div className={styles.logo}>
          <img alt={'logo'} src={config.logo} />
          <span>{config.name}</span>
        </div>
        <form>
          <Form.Item hasFeedback>
            {getFieldDecorator('mobile', {
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: "手机号不能为空",
                },
              ],
            })(<Input size="large" onPressEnter={handleOK} placeholder="手机号"/>)}
          </Form.Item>
          <Form.Item hasFeedback>
            {getFieldDecorator('password', {
              rules: [
                {
                  required: true,
                  message: "密码不能为空",
                },
              ],
            })(<Input size="large" type="password" onPressEnter={handleOK} placeholder="密码"/>)}

          </Form.Item>
          <Row>
            <Col span={24} className={styles.forgetPassword}>
              <a href="/forgetPassword">忘记密码？</a>
            </Col>
          </Row>
          <Row>
            <Button type="primary" size="large" loading={loading.effects['app/login']} onClick={handleOK} >
              登入
            </Button>
          </Row>
          <Form.Item>
            <Col span={24} className={styles.toRegist}>
              <a href="/register">还没账号？ 赶紧注册吧</a>
            </Col>
          </Form.Item>
        </form>
      </div>
    );
  }
}

export default connect(({ loading }) => ({ loading }))(Form.create()(Login));

